<template>
  <div>
    <el-card shadow="never">
      <el-table
        :data="state.dataSoucre"
        :loading="state.loading"
        border
        :span-method="arraySpanMethod"
      >
        <el-table-column prop="gbCategory" label="标准" align="center" />
        <el-table-column prop="indicators" label="类别" align="center" />
        <el-table-column prop="target" label="指标" align="center" />
        <el-table-column prop="unit" label="单位" width="120px" align="center" />
        <el-table-column prop="upper3" label="Ⅲ类限值" width="150px" align="center" />
        <el-table-column prop="upper4" label="Ⅳ类限值" width="150px" align="center" />
        <el-table-column prop="classify" label="分类" align="center" />
        <el-table-column prop="isNapl" label="是否是NAPL" align="center" />
        <el-table-column fixed="right" align="center" label="操作" width="140px">
          <template #default="scope">
            <el-button link type="primary" @click="openForm('update', scope.row.id)">
              修改
            </el-button>
            <el-button link type="danger" @click="handleDelete(scope.row.id)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!--      <Pagination-->
      <!--        v-model:limit="state.params.pageSize"-->
      <!--        v-model:page="state.params.pageNo"-->
      <!--        :total="state.total"-->
      <!--        @pagination="getList"-->
      <!--      />-->
    </el-card>
    <!-- 表单弹窗：添加/修改 -->
    <AddForm ref="formRef" @success="getList" />
  </div>
</template>

<script lang="ts" setup>
import { getListApi, deleteApi } from '@/api/home'
import { List } from '@/api/home/types'
import type { TableColumnCtx } from 'element-plus'
import AddForm from './components/AddForm.vue'

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

defineOptions({ name: 'Pollutant' })

interface SpanMethodProps {
  row: List
  column: TableColumnCtx<List>
  rowIndex: number
  columnIndex: number
}
type StateType = {
  dataSoucre: List[]
  loading: boolean
  total: number
  params: PageParam
}

const state = reactive<StateType>({
  dataSoucre: [],
  loading: false,
  total: 0,
  params: {
    pageNo: 1,
    pageSize: 100
  }
})

const sortedTableData = (tableData: List[], key: string) => {
  return tableData.slice().sort((a, b) => {
    const dateA = a[key]
    const dateB = b[key]
    return dateA - dateB
  })
}

const getList = async () => {
  const { list, total } = await getListApi({
    ...state.params
  })
  state.dataSoucre = sortedTableData(list, 'gbCategory')
  state.total = total
}
getList()

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await deleteApi(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

const arraySpanMethod = ({ rowIndex, columnIndex }: SpanMethodProps) => {
  if (![0, 1, 6, 7].includes(columnIndex)) {
    return [1, 1]
  }
  // 如果列数据相同就合并
  const tableData = state.dataSoucre
  const key = [
    'gbCategory',
    'indicators',
    'target',
    'unit',
    'upper3',
    'upper4',
    'classify',
    'isNapl'
  ][columnIndex]
  if (rowIndex === 0 || tableData[rowIndex][key] !== tableData[rowIndex - 1][key]) {
    let rowspan = 1
    for (let i = rowIndex + 1; i < tableData.length; i++) {
      if (tableData[i][key] === tableData[rowIndex][key]) {
        rowspan++
      } else {
        break
      }
    }
    return [rowspan, 1]
  } else {
    return [0, 0]
  }
}
</script>
